<template>
  <div class="map-picker">
    <div
      class="picker-button"
      @click="showDialog = true"
    >
      <slot>选择链接</slot>
    </div>
    <el-dialog
      title="选择链接"
      :visible.sync="showDialog"
      width="500"
      destroy-on-close
      append-to-body
      custom-class="middle-dialog"
      lock-scroll
    >
      <map-fence />
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="showDialog = false">清 除</el-button>
        <el-button
          type="primary"
          @click="showDialog = false"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import MapFence from '@/components/MapFence'
export default {
  name: 'MapPicker',
  components: {
    MapFence
  },
  props: {
    code: {
      type: [String, Object, Array],
      default: null
    },
    icon: {
      type: String,
      default: 'em-icon-script'
    },
    title: {
      type: String,
      default: 'CodeMirror'
    }
  },
  data() {
    return {
      showDialog: false,
      saving: false,
      activeIndex: undefined
    }
  },
  computed: {
    codeHtml() {
      return this.code
    }
  },
  created() {},
  methods: {}
}
</script>

<style lang="scss">
.picker-button {
  cursor: pointer;
}
.middle-dialog {
  height: 70vh;
  display: flex;
  flex-direction: column;
  .el-dialog__footer,
  .el-dialog__header {
    padding: 20px;
  }
  .el-dialog__body {
    flex: 1;
    overflow: hidden;
    padding: 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
  }
}
</style>
